<template>
  <div class="elem-shortcut-tool" v-if="hasCurrElement">
    <el-tooltip v-for="(item, idx) in toolData" :key="idx" :content="getName(item)" placement="bottom">
      <i class="iconfont" :class="getClass(item)" @click="handleCommand(item)"></i>
    </el-tooltip>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from 'vuex';
export default {
  name: 'elem-shortcut-tool',
  data() {
    return {
      toolData: [
        {
          key: 'copy',
          title: '复制',
          icon: 'icon-copy',
          eventName: 'copyElment'
        },
        {
          id: 'delete',
          title: '删除',
          icon: 'icon-delete',
          eventName: 'deleteElment'
        },
        {
          id: 'lock',
          title: '锁定',
          icon: 'icon-lock',
          eventName: 'toggleLockElment'
        },
        {
          id: 'up',
          title: '上移浮层',
          icon: 'icon-layer-up',
          eventName: 'resetElementZIndex',
          params: { type: 'layerUp' }
        },
        {
          id: 'down',
          title: '下移浮层',
          icon: 'icon-layer-down',
          eventName: 'resetElementZIndex',
          params: { type: 'layerDown' }
        },
        {
          id: 'top',
          title: '置顶',
          icon: 'icon-layer-top',
          eventName: 'resetElementZIndex',
          params: { type: 'layerTop' }
        },
        {
          id: 'down',
          title: '置底',
          icon: 'icon-layer-bottom',
          eventName: 'resetElementZIndex',
          params: { type: 'layerBottom' }
        }
      ]
    };
  },
  computed: {
    ...mapGetters('programs', ['currElement', 'hasCurrElement'])
  },
  methods: {
    ...mapMutations('programs', ['resetElementZIndex', 'toggleLockElment']),
    ...mapActions('programs', ['copyElment', 'deleteElment']),
    handleCommand(item) {
      const { eventName, params = {} } = item;
      if (typeof this[eventName] === 'function') {
        this[eventName](params);
      }
      this.$forceUpdate();
    },
    getClass(item) {
      if (item.id === 'lock' && this.currElement.locked) {
        return 'icon-unlock';
      } else {
        return item.icon;
      }
    },
    getName(item) {
      if (item.id === 'lock' && this.currElement.locked) {
        return '解锁';
      } else {
        return item.title;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.elem-shortcut-tool {
  position: absolute;
  top: 5px;
  left: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  background: #ffffff;
  padding: 5px;
  z-index: 99;
  .iconfont {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #dddddd;
    cursor: pointer;
  }
}
</style>
